<template>
  <div class="mycenter-page">
    <div class="left">
      <div @click="switchover(1)" :class="{ switchoverActive: leftClick == 1 }">
        个人
      </div>
      <div @click="switchover(2)" :class="{ switchoverActive: leftClick == 2 }">
        团队
      </div>
    </div>
    <el-card class="right">
      <div class="steps">
        <!-- 横向步骤条 -->
        <div class="custom-horizontal-steps">
          <div class="steps-wrapper">
            <div
              v-for="(step, index) in steps"
              :key="index"
              class="step-item-wrapper"
              :class="{
                'step-item': true,
                active: index + 1 === stepActive,
                finish: index + 1 < stepActive,
              }"
            >
              <div class="step-icon">
                <span v-if="index + 1 < stepActive" class="step-check">✔</span>
                <span v-else>{{ index + 1 }}</span>
              </div>
              <div class="step-title">{{ step }}</div>
              <!-- 步骤间的连接线 -->
              <div
                v-if="index < steps.length - 1"
                class="step-line"
                :class="{ 'line-finished': index + 1 < stepActive }"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div class="midst">
        {{
          stepActive == 1
            ? "基础信息"
            : stepActive == 2
            ? "培训报名预约"
            : stepActive == 3
            ? "正考报名预约"
            : "培训鉴定查询"
        }}
      </div>
      <div>
        <Jcxx :leftClick="leftClick" v-if="stepActive == 1" />
        <pxbmyy :leftClick="leftClick" v-if="stepActive == 2" />
        <zkbmyy :leftClick="leftClick" v-if="stepActive == 3" />
      </div>
      <div style="position: absolute; bottom: 20px; left: 50%">
        <div>
          <el-button v-if="stepActive > 1" type="primary" @click="last"
            >上一步</el-button
          >
          <el-button type="primary" v-if="stepActive < 3" @click="next">
            下一步
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import Jcxx from "./components/jcxx.vue";
import pxbmyy from "./components/pxbmyy.vue";
import zkbmyy from "./components/zkbmyy.vue";
const state = reactive({
  leftClick: 1,
  stepActive: 2, // 当前激活步骤
  steps: ["基础信息", "培训报名预约", "正考报名预约", "培训鉴定查询"],
});

let { leftClick, steps, stepActive } = toRefs(state);

/**
 * 左侧切换
 */
function switchover(e) {
  state.leftClick = e;
}
/**
 * 上一步
 */
function last() {
  state.stepActive--;
}
/**
 * 下一步
 */
function next() {
  state.stepActive++;
}
</script>

<style lang="scss" scoped>
.mycenter-page {
  display: flex;
  background-color: #f2f2f2;
  position: relative;
  .left {
    width: 277px;
    margin: 10px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding-top: 60px;
    position: absolute;
    height: calc(100% - 86px);
    top: 0;
    left: 0;
    div {
      padding: 20px 10px;
      text-align: center;
      cursor: pointer;
      color: rgba(146, 146, 146, 1);
      font-size: 18px;
      transition: all 0.3s;
      &:hover {
        background-color: #f2f2f2;
      }
      &.switchoverActive {
        color: rgba(35, 86, 246, 1);
      }
    }
  }
  .right {
    width: 100%;
    height: calc(100vh - 272px);
    overflow-y: auto;
    padding: 50px;
    margin-left: 297px;
  }
}

.steps {
  margin-bottom: 30px;
}

.custom-horizontal-steps {
  position: relative;
  display: flex;
  justify-content: center;
  height: fit-content;

  .steps-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 77%;
  }

  .step-item-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;

    &:last-child {
      flex: 0 0 auto; // 最后一个步骤不伸缩，只占用自身宽度
    }
  }

  .step-item {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1;

    .step-icon {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #e1e1e1;
      color: #333;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease-in-out;
      flex-shrink: 0;
      z-index: 2;
    }

    .step-title {
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 10px;
    }

    &.finish .step-icon {
      background-color: #fff;
      border: 2px solid #2356f6;
      color: #2356f6;
    }
    &.finish .step-title {
      color: #2356f6;
    }

    &.active .step-icon {
      background-color: #2356f6;
      color: #fff;
    }
    &.active .step-title {
      color: #2356f6;
    }
    &.finish ~ .step-item-wrapper:not(.finish):not(.active) .step-icon {
      background-color: #e1e1e1;
      border: none;
      color: rgba(0, 0, 0, 0.4);
    }
    &.finish ~ .step-item-wrapper:not(.finish):not(.active) .step-title {
      color: rgba(0, 0, 0, 0.4);
    }
  }

  .step-line {
    flex: 1;
    height: 2px;
    background-color: rgba(220, 220, 220, 1);
    margin: 0 15px;
    opacity: 0.3;
  }

  /* 完成步骤后面的连接线设置为不透明 */
  .line-finished {
    opacity: 1;
    background-color: #2356f6;
  }
}
.midst {
  font-weight: bold;
  font-size: 18px;
  padding: 20px 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
</style>
